<template>
    <div class="verify">
        <div class="header">
            <div @click="$router.go(-1)"><img src="../../assets/image/assets-center/left-arrow.png" alt=""
                    class="w-14 h-27" /></div>
        </div>
        <div class="content">
            <div class="title textColor">{{ $t('安全验证') }}</div>
            <p v-if="type == 3">{{ $t('verifyGoogleTips') }}</p>
            <span class="label textColor">{{ type == 2 ? $t('邮箱验证') : type == 1 ? $t('手机验证') : $t('谷歌验证') }}</span>
            <p v-if="type == 2">{{ $t('verifyEmailTips', { 'account': account }) }}</p>
            <p v-if="type == 1">{{ $t('verifyPhoneTips', { 'account': account }) }}</p>
            <div class="iptbox inputBackground">
                <input type="text" class="inputBackground textColor" :placeholder="$t('请输入验证码')" v-model="verifycode" @input="changeInput">
                <span v-if="type != 3" @click="senCode">{{ $t('重新发送验证码') }}<template v-if="time"> ({{
                time}})s</template></span>
            </div>
            <button :disabled="!hightLight" class="btn"
                @click="$router.push({ name: 'resetPassword', query: { type, account, verifycode, username }})"
                :class="hightLight ?'hightLight':''">{{ $t('下一步')
                }}</button>
        </div>
    </div>
</template>

<script>
import API from "@/API/login.js";
import Axios from "@/API/userCenter.js";
export default {
    props: {

    },
    components: {

    },
    data() {
        return {
            verifycode: '',
            type: '',
            account: '',
            username:'',
            hightLight:false,
            timer: '',
            time: 0
        }
    },
    mounted() {
        let type = this.$route.query.type;
        this.type = type;
        this.account = this.$route.query.account;
        this.username = this.$route.query.username;
        if(this.type!=3){
            clearInterval(this.timer)
            this.senCode()
        }
    },
    methods: {
        changeInput(){
            if (this.verifycode.length==6){
                this.hightLight = true;
            }else{
                this.hightLight = false;
            }
        },
        senCode() {
            if (this.time > 0) {
                return false
            }
            API.sendVerifyCode({
                target: this.account,
            }).then((res) => {
                this.time = 30;
                this.timer = setInterval(() => {
                    if (this.time > 0) {
                        this.time = this.time - 1
                    } else {
                        this.time = 0;
                        clearInterval(this.timer)
                    }
                }, 1000);
            }).catch((error) => {
                if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}            
            });
        }
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
}
</script>

<style lang="scss" scoped>
.verify {
    font-size: 26px;
    padding: 0 32px;
}

.header {
    display: flex;
    justify-content: space-between;
    padding: 0 26px;
    font-size: 28px;
    height: 100px;
    line-height: 100px;
}

.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 54px;
    margin-bottom: 33px;
}
.label{
    margin-top: 23px;
}
.content {
    p {
            color: #868D9A;
            font-size: 30px;
            margin-bottom: 50px;
        }

    .iptbox {
        height: 88px;
        margin-top: 16px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 6px;

        input {
            flex: 1;
            height: 100%;
            border: none;
        }

        span {
            color: #1D91FF;
        }
    }
}

.btn {
    background: $bg_dark;
    color: #C0C4CC;;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    margin-top: 180px;
    border-radius: 10px;
    width: 100%;
    border: none;
}
.hightLight{
    background: $btn_main;
    color: #000;
}
</style>